<template>
  <el-card style="margin-bottom:140px">
    <!-- （试卷名称、返回按钮） -->

    <el-row
      type="flex"
      justify="space-spanetween"
      align="middle"
      style="border-bottom:1px solid #eee;height:45px"
    >
      <!-- 左边 -->
      <el-col>
        <span class="tag">试卷名称:</span>
        {{PaperInfoVal.paper_name}}
      </el-col>
      <!-- 右边 -->
      <div>
        <el-button size="small" type="primary" plain @click="$emit('backPaper')">返回列表</el-button>
      </div>
    </el-row>
    <el-row style="line-height: 30px;margin-top:15px">
      <el-col :span="6">
        <span class="tag">归属学科:</span>
        {{PaperInfoVal.subject_name}}
      </el-col>
      <el-col :span="6">
        <span class="tag">归属目录:</span>
        {{PaperInfoVal.directory_name}}
      </el-col>
      <el-col :span="6">
        <span class="tag">试卷状态:</span>
        <!-- {{PaperInfoVal.show_state}} -->
        <el-tag v-if="PaperInfoVal.show_state===1" size="small" type="success">启用</el-tag>
        <el-tag v-else size="small" type="info">禁用</el-tag>
      </el-col>
      <el-col :span="6">
        <span class="tag">试卷类型:</span>
        {{PaperInfoVal.paper_type===1?'模拟卷':'真题卷'}}
      </el-col>
    </el-row>
    <el-row style="line-height: 30px;">
      <el-col :span="6">
        <span class="tag">试卷难度:</span>
        {{PaperInfoVal.difficulty===1?'简单':PaperInfoVal.difficulty===2?'中等':'较难'}}
      </el-col>
      <el-col :span="6">
        <span class="tag">试卷题型:</span>
        {{questionType}}
      </el-col>
      <el-col :span="6">
        <span class="tag">试卷总分:</span>
        {{PaperInfoVal.total_score}}分
      </el-col>
      <el-col :span="6">
        <span class="tag">及格分数:</span>
        {{PaperInfoVal.pass_score}}分
      </el-col>
    </el-row>
    <el-row style="line-height: 30px; border-bottom:1px solid #eee;height:45px">
      <el-col :span="6">
        <span class="tag">创建人:</span>
        {{PaperInfoVal.create_name}}
      </el-col>
      <el-col :span="6">
        <span class="tag">创建时间:</span>
        {{PaperInfoVal.created_at | formatDate}}
      </el-col>
    </el-row>
    <el-row style="line-height:60px">
      <b>选题信息</b>
    </el-row>
    <el-table border :data="chooseQsList">
      <el-table-column label="题型" width="180px" prop="name"></el-table-column>
      <el-table-column label="选题信息">
        <template slot-scope="{row}">
          共
          <el-input size="small" style="width:60px" readonly autocomplete="off" :value="row.num" />题，每题
          <el-input size="small" style="width:60px" readonly autocomplete="off" :value="row.score" />分,已选题数:
          <el-link type="primary">{{row.num}}</el-link>题
          <el-button size="small" type="success" @click="lookUpFn(row.type)">看题</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 查阅试题弹窗 -->
    <el-dialog
      title="查阅试题"
      :visible.sync="showDialog"
      width="75%"
      v-if="showDialog"
      @close="lookClose"
    >
      <el-table border :data="questionList">
        <el-table-column label="试题内容">
          <template slot-scope="{row}">
            <el-row type="flex" align="middle">
              <el-col :span="2">
                <span class="tag2">ID：{{row.id}}</span>
              </el-col>
              <el-col :span="22">
                <span class="tag2">题干信息：</span>
                <el-link
                  :underline="false"
                  type="primary"
                  v-html="row.question"
                  @click="qsPreviewFn(row.id)"
                ></el-link>
              </el-col>
            </el-row>
            <el-row type="flex" align="middle">
              <el-col :span="4">
                <span class="tag2">归属学科：</span>
                {{row.subject_name}}
              </el-col>
              <el-col :span="4">
                <span class="tag2">归属目录：</span>
                {{row.directory_name}}
              </el-col>
              <el-col :span="7">
                <span class="tag2">标签信息：</span>
                {{row.tag_info[0]}}
              </el-col>
              <el-col :span="4">
                <span class="tag2">发布状态：</span>
                <el-tag type="success" size="small">上架</el-tag>
              </el-col>
              <el-col :span="4">
                <span class="tag2">发布时间：</span>
                {{row.check_time | formatDate}}
              </el-col>
            </el-row>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <!-- 试题预览弹窗 -->
    <el-dialog
      title="试题预览"
      :visible.sync="previewShow"
      width="68%"
      v-if="previewShow"
      @close="preClose"
    >
      <el-divider content-position="center">基本信息</el-divider>
      <el-row type="flex" align="middle" style="line-height:30px">
        <el-col :span="10">
          <span class="tag2">试题编号：</span>
          {{previewQuestion.quest_num}}
        </el-col>
        <el-col :span="4">
          <span class="tag2">试题类型：</span>
          {{previewQuestion.quest_type===1?'选择题':previewQuestion.quest_type===2?"多选题":previewQuestion.quest_type===3?'判断题':'简答题'}}
        </el-col>
        <el-col :span="5">
          <span class="tag2">归属学科：</span>
          {{previewQuestion.subject_name}}
        </el-col>
        <el-col :span="5">
          <span class="tag2">归属目录：</span>
          {{previewQuestion.directory_name}}
        </el-col>
      </el-row>
      <el-row type="flex" align="middle" style="line-height:30px">
        <el-col :span="10">
          <span class="tag2">标题信息：</span>
          {{previewQuestion.tag_info[0]}}
          <!-- {{info}} -->
        </el-col>
        <el-col :span="4">
          <span class="tag2">发布状态：</span>

          <el-tag type="success" size="small">上架</el-tag>
        </el-col>
        <el-col :span="5">
          <span class="tag2">审核人：</span>
          {{previewQuestion.check_username}}
        </el-col>
        <el-col :span="5">
          <span class="tag2">审核状态：</span>
          <el-tag type="success" size="small">通过</el-tag>
        </el-col>
      </el-row>
      <el-row type="flex" align="middle" style="line-height:30px">
        <el-col :span="10">
          <span class="tag2">审核意见：</span>
          {{previewQuestion.check_remarks}}
        </el-col>
        <el-col :span="4">
          <span class="tag2">创建人：</span>
          {{previewQuestion.create_name}}
        </el-col>
        <el-col :span="5">
          <span class="tag2">难度系数：</span>
          {{previewQuestion.difficulty===1?'简单':previewQuestion.difficulty===2?"中等":"困难"}}
        </el-col>
        <el-col :span="5">
          <span class="tag2">发布时间：</span>
          {{previewQuestion.created_at | formatDate}}
        </el-col>
      </el-row>
      <!-- ---------------------------试题信息------------------------------------ -->
      <el-divider content-position="center">试题信息</el-divider>
      <el-row>
        <el-col :span="24">
          <span class="tag2">题干信息：</span>
          <el-link :underline="false" type="primary" v-html="previewQuestion.question"></el-link>
        </el-col>
        <el-col :span="24" style="margin-top:10px">
          <el-row type="flex" align="middle">
            <span class="tag2">选项信息：</span>
            <!-- 选择题 -->
            <span v-if="previewQuestion.quest_type===2">
              <el-checkbox
                v-for="item in options"
                :key="item.code"
                checked
              >{{item.code}}&nbsp;{{ item.content}}</el-checkbox>
            </span>
            <!-- 判断题 -->
            <span v-if="previewQuestion.quest_type===3">
              <el-checkbox :checked="previewQuestion.is_true_question===1">正确</el-checkbox>
              <el-checkbox :checked="previewQuestion.is_true_question===2">错误</el-checkbox>
            </span>
            <span v-if="previewQuestion.quest_type===4">简答题、无选项</span>
          </el-row>
        </el-col>
      </el-row>
      <!-- ---------------------------试题信息-------------------------------------->
      <!-- ---------------------------答案信息-------------------------------------->
      <el-divider content-position="center">答案信息</el-divider>
      <el-row type="flex">
        <span class="tag2">正确答案：</span>
        <el-link
          v-if="previewQuestion.quest_type===4"
          type="primary"
          :underline="false"
          v-html="previewQuestion.quest_answer"
        ></el-link>
        <span v-else>
          <el-link type="primary" :underline="false" v-html="previewQuestion.quest_answer"></el-link>
        </span>
      </el-row>
      <el-row type="flex" align="middle" style="margin-top:10px">
        <span class="tag2">答案解析：</span>
        <span v-if="previewQuestion.quest_type===4">暂无解析</span>
        <span v-html="previewQuestion.quest_remark"></span>
      </el-row>
      <!-- ---------------------------答案信息-------------------------------------->
    </el-dialog>
  </el-card>
</template>

<script>
export default {
  name: 'PaperInfo',
  props: {
    PaperInfoVal: {
      type: Object,
      require: true,
    },
  },
  data() {
    return {
      // 试卷题型
      questionType: '',
      // 选题信息
      chooseQsList: [],
      // 查阅试题显示隐藏
      showDialog: false,
      // 试题预览显示隐藏
      previewShow: false,
      // 查阅试题中试题列表
      questionList: [],
      // 试题预览的题目
      previewQuestion: '',
      // 选择题选列表
      options: [],
    }
  },
  created() {
    let arr = JSON.parse(this.PaperInfoVal.check_question_list)
    //选题
    this.chooseQsList = arr
    this.questionType = arr.map((item) => item.name)
    // 题型
    this.questionType = this.questionType.join(',')
  },
  methods: {
    // 查阅试题
    lookUpFn(type) {
      // console.log(type)
      // 通过拿到题目类型 来筛选出题目列表里面对应的题目
      let questionList = this.PaperInfoVal.question_data.filter(
        (item) => item.quest_type === type
      )
      console.log(questionList)
      this.questionList = questionList
      this.showDialog = true
    },
    // 试题预览
    qsPreviewFn(id) {
      console.log(id)
      // 从问题列表筛选出对应的单个题目
      this.previewQuestion = this.questionList.filter((item) => item.id === id)
      this.previewQuestion = this.previewQuestion[0]
      console.log(this.previewQuestion)
      // 如果是选择题
      if (
        this.previewQuestion.quest_type === 1 ||
        this.previewQuestion.quest_type === 2
      ) {
        this.options = JSON.parse(this.previewQuestion.quest_options)
        console.log('选项', this.options)
      }
      this.previewShow = true
    },
    // 查阅试题关闭事件
    lookClose() {
      this.questionList = []
    },
    // 试题预览关闭事件
    preClose() {
      this.previewQuestion = ''
      this.options = []
    },
  },
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__header {
  border-bottom: 1px solid #ebebeb;
}
.tag {
  color: #606266;
}
.tag2 {
  color: #aaa;
}
::v-deep li {
  list-style: none;
  line-height: 20px;
  // height: 30px;
}
::v-deep p {
  margin: 0;
  padding: 0;
  // line-height: 30px;
}
::v-deep ul {
  margin: 0;
  padding: 0;
}
</style>
